<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <script src="../js/jquery/1.x/jquery.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/config.js"></script>
    <script src="../js/function.js"></script>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/login.css?v=1">
</head>
<body>
<div class="container">
    <div class="center-container">
        <img class="center-container-bg" src="../img/tupian.png">
        <div class="login-body">
            <div class="login-logo">
                <img src="../img/logo.png">
            </div>
            <div class="login-main">
                <p class="login-tip">用户登录</p>
                <div class="login-item">
                    <img src="../img/yonghu.png">
                    <input name="username" type="text" placeholder="请输入用户名">
                </div>
                <div class="login-item">
                    <img src="../img/mima.png">
                    <input name="password" type="password" placeholder="请输入密码">
                </div>
                <button class="login-btn" id="login-btn">登录</button>
                <div class="login-other">
                    <a href="javascript:;" class="yzm-login">验证码登录</a>
                    <a href="javascript:;" class="forget-btn">忘记密码?</a>
                </div>
            </div>
        </div>
        <div class="login-body login-body-yzm"  style="display:none;">
            <div class="login-logo">
                <img src="../img/logo.png">
            </div>
            <div class="login-main">
                <p class="login-tip">用户登录</p>
                <div class="login-item">
                    <input name="cell" type="text" placeholder="请输入手机号">
                    <button class="yzm-login-getyzm">获取验证码</button>
                </div>
                <div class="login-item">
                    <input class="login-yzm" name="smscode" type="text" placeholder="请输入验证码">
                </div>
                <button class="login-btn" id="yzm-login-btn">登录</button>
                <div class="login-other">
                    <a href="javascript:;" class="password-login">密码登录</a>
                </div>
            </div>
        </div>
    </div>
    <div class="forget-container">
        <div class="forget-main">
            <div class="forget-title">
                <p>忘记密码手机验证</p>
                <i class="layui-icon layui-icon-close forget-main-close"></i>
            </div>
            <div class="forget-form">
                <p class="forget-tip">请输入注册使用的手机号来获取验证码后登录。</p>
                <!--<div class="forget-form-item">
                    <input name="username" type="text" placeholder="请输入用户名">
                </div>-->
                <div class="forget-form-item">
                    <input name="mobile" type="text" placeholder="请输入11位手机号">
                </div>
                <div class="forget-form-item">
                    <input name="verify_code" type="text" placeholder="请输入验证码">
                    <button class="get-forget-yzm">获取验证码</button>
                </div>
                <div class="forget-form-item">
                    <input name="password" type="password" placeholder="请输入密码">
                </div>
                <div class="forget-form-item">
                    <input name="confirm_password" type="password" placeholder="请确认密码">
                </div>
                <div class="forget-form-item">
                    <button class="forget-cancel">取消</button>
                    <button class="forget-confirm-btn">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var maxtime = 60;
    var maxtime2 = 60;
    var timer;
    var timer2;
    //忘记密码倒计时
    function CountForgetSms(){
        if(maxtime >= 0){
            --maxtime;
            $(".get-forget-yzm").html(maxtime+'秒后获取');
            $(".get-forget-yzm").attr('disabled',true);
        }else{
            $(".get-forget-yzm").html('获取验证码');
            $(".get-forget-yzm").attr('disabled',false);
            clearInterval(timer);
        }
    }
    //验证码登录倒计时
    function CountDownSmsLogin(){
        if(maxtime2 >= 0){
            --maxtime2;
            $(".yzm-login-getyzm").html(maxtime2+'秒后获取');
            $(".yzm-login-getyzm").attr('disabled',true);
        }else{
            $(".yzm-login-getyzm").html('获取验证码');
            $(".yzm-login-getyzm").attr('disabled',false);
            clearInterval(timer2);
        }
    }
    $(document).ready(function(){
        //定义container的margin-top高度


        window.onload=function(){
            setContainerHeight();
        }
        window.onresize=function(){
            setContainerHeight();
        }
        function setContainerHeight(){
            var height = $(window).height();
            var center_container_height = $('.center-container').height();
            $('.center-container').css('margin-top',(height-center_container_height)/2);
        }

        //判断是否已经登录
        var token = getLocalStorage('token');
        var userInfo = JSON.parse(getLocalStorage('userInfo'));
        //console.log(userInfo);console.log(userInfo.user_id);return false;
        if(token !== null && userInfo !== null){
            //window.location.href='./indexboard.html';
        }

        //验证码登录
        $('.yzm-login').click(function(){
            $('.login-body').hide();
            $('.login-body-yzm').show();
        })
        //密码登录
        $('.password-login').click(function(){
            $('.login-body').show();
            $('.login-body-yzm').hide();
        })
        //忘记密码
        $('.forget-btn').click(function(){
            $('.forget-container').show();
        })
        $('.forget-main-close').click(function(){
            $('.forget-container').hide();
        });
        $('.forget-cancel').click(function(){
            $('.forget-container').hide();
        });

        layui.use(['element','form','layer'],function(){
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            //登录
            $('#login-btn').click(function(){
                console.log('密码登录');
                var username = $(".login-main input[name='username']").val();
                var password = $(".login-main input[name='password']").val();
                if(username == ''){
                    layer.msg('请输入用户名',{icon:5,time:1500});
                    return false;
                }
                if(password == ''){
                    layer.msg('请输入密码',{icon:5,time:1500});
                    return false;
                }
                var params = {"username":username,"password":password};
                var loadindex = layer.load();
                console.log(params);
                ajax_login(configUrl.loginUrl,params,(res)=>{
                    console.log(params);
                    layer.close(loadindex)
                    if(res.status == 0){
                        ajax_get(configUrl.getMenuList,{token:res.data.access_token},(res)=>{
                            if(res.data == ''){
                                layer.msg('您没有开通垂体项目权限',{icon:5,time:1500},function(){
                                    localStorage.clear();
                                });
                            }else{
                                layer.msg('登录成功',{icon:1,time:1000},function(){
                                    window.location.href='../template/indexboard.html';
                                });
                            }
                        })
                        //layer.msg('登录成功',{icon:1,time:1000},function(){});
                    }else{
                        layer.msg(res.msg,{icon:5,time:1500});
                        window.location.href='../template/indexboard.html';
                    }
                });
            });

            //验证码登录，获取验证码
            $('.yzm-login-getyzm').click(function(){
                var cell = $(".login-body-yzm input[name=cell]").val();
                if(cell == ''){
                    layer.msg('请输入手机号',{icon:5,time:1500});
                    return false;
                }
                var loadindex = layer.load();
                ajax_post(configUrl.getLoginCode,{cell:cell},(res)=>{
                    layer.close(loadindex);
                    if(res.status == 0){
                        layer.msg('发送成功',{icon:1,time:1000},function(){
                            timer2 = setInterval('CountDownSmsLogin()',1000);
                        });
                    }else{
                        layer.msg(res.msg,{icon:5,time:1500});
                    }
                })
            });
            //验证码登录确定
            $('#yzm-login-btn').click(function(){
                var cell = $(".login-body-yzm input[name=cell]").val();
                var smscode = $(".login-body-yzm input[name=smscode]").val();
                if(cell == ''){
                    layer.msg('请输入手机号',{icon:5,time:1500});
                    return false;
                }
                if(smscode == ''){
                    layer.msg('请输入验证码',{icon:5,time:1500});
                    return false;
                }
                var loadindex = layer.load();
                ajax_post(configUrl.loginByCell,{cell:cell,smscode:smscode},(res)=>{
                    layer.close(loadindex);
                    console.log(res);
                    if(res.status == 0){
                        layer.msg('登录成功',{icon:1,time:1000},function(){
                            localStorage.setItem('userInfo',JSON.stringify(res.data));
                            localStorage.setItem('token',res.data.access_token);
                            window.location.href='../template/indexboard.html';
                        });
                    }else{
                        layer.msg(res.msg,{icon:5,time:1500},function(){
                            return false;
                        });
                    }
                })
            });

            //忘记密码-发送短信
            $('.get-forget-yzm').click(function(){
                console.log('忘记密码-发送短信');
                var mobile = $(".forget-main input[name=mobile]").val();
                if(mobile == ''){
                    layer.msg('请输入手机号',{icon:5,time:1500});
                    return false;
                }
                console.log(mobile);
                var loadindex = layer.load();
                ajax_post(configUrl.verificationCode,{mobile:mobile},(res)=>{
                    layer.close(loadindex);
                    console.log(res);
                    if(res.status == 0){
                        layer.msg('发送成功',{icon:1,time:1000},function(){
                            timer = setInterval('CountForgetSms()',1000);
                        });
                    }else{
                        layer.msg(res.msg,{icon:5,time:1500});
                    }
                })
            });
            //忘记密码，修改密码
            $('.forget-confirm-btn').click(function(){
                console.log('修改密码');
                //var username = $(".forget-form input[name=username]").val();
                var mobile = $(".forget-form input[name=mobile]").val();
                var verify_code = $(".forget-form input[name=verify_code]").val();
                var password = $(".forget-form input[name=password]").val();
                var confirm_password = $(".forget-form input[name=confirm_password]").val();
                if(mobile == ''){
                    layer.msg('请输入手机号',{icon:5,time:1500});
                    return false;
                }
                if(verify_code == ''){
                    layer.msg('请输入验证码',{icon:5,time:1500});
                    return false;
                }
                if(password == ''){
                    layer.msg('请输入验证码',{icon:5,time:1500});
                    return false;
                }
                if(confirm_password == ''){
                    layer.msg('请输入验证码',{icon:5,time:1500});
                    return false;
                }
                if(password !== confirm_password){
                    layer.msg('两次密码输入不同',{icon:5,time:1500});
                    return false;
                }
                var loadindex = layer.load();
                ajax_post(configUrl.passwords,{_method:'PUT',mobile:mobile,verify_code:verify_code,password:password,confirm_password:password},(res)=>{
                    layer.close(loadindex);
                    console.log(res);
                    if(res.status == 0){
                        layer.msg('修改成功',{icon:1,time:1000},function(){
                            $('.forget-container').hide();
                        });
                    }else{
                        layer.msg(res.msg,{icon:5,time:1500});
                    }
                })
            })
        })


    })
</script>
</html>